<template>
    <div class="container">
		<div class="content-index">
			<div class="tui-header-center">
				<image :src="userInfo.avatarPath" class="tui-avatar" mode="aspectFill" @click="$navSkin.toDetail()"></image>
				<div class="tui-info" @click="$navSkin.toDetail()">
					<div class="tui-nickname">{{userInfo.nickname}}</div>
					<div class="tui-explain">
						<span>关注：{{userInfo.followCount}}</span> <span>粉丝：{{userInfo.fansCount}}</span>
					</div>
				</div>
				<div class="tui-btn-edit">
					<image src="/static/icons/set.png" mode="" @click="$navSkin.toSetting()"></image>
					<image src="/static/icons/icon_tianjia.png" mode="" @click="$navSkin.toSearch()"></image>
				</div>
			</div>
			<div class="topic-header">
				<div class="left">
					<span>{{$utils.monthDate()}}&nbsp;&nbsp;&nbsp;&nbsp;{{$utils.week()}}</span>
				</div>
				<div class="right">
					<div class="userInfo">
						<image class="user-img" :src="userInfo.avatarPath" mode="aspectFill"></image>
						<div class="user-num">{{userInfo.myIndex || '000'}}</div>
					</div>
					<div class="userInfo">
						<image class="user-img" :src="userInfo.lastUpdateAvatar" mode="aspectFill"></image>
						<div class="user-num">{{userInfo.lastUpdateIndex || '000'}}</div>
					</div>
				</div>
			</div>
			<div class="chart-canvas">
				<div class="chart-head">
					<div class="chart-head-left">
						今指数
					</div>
					<div class="chart-head-right">
						<image @click="toSend()" class="snapshot" src="/static/icons/icon_xiangji.png" mode="aspectFill"></image>
						<image @click="toMyTodayData" class="arrow" src="../../static/icons/icon_zhankai.png" mode="aspectFill"></image>
					</div>
				</div>
				<div class="chart-body" id="chart_canvas"><l-f2 ref="todayIndex"></l-f2></div>
			</div>
			
			<div class="tab-list">
				<div class="tab-title">
					名站导航 (名家欣赏 文化传递)
				</div>
				<div class="top">
					<div class="top-item" v-for="(item,index) in topLinkList"
					@longtap="tagLongTap(item.linkId,item.linkName,true)" @click="tagClick(item.link)">
						{{item.linkName}}
					</div>
				</div>
				<div class="tab">
					<div class="tab-item" v-for="(item,index) in linkList"
					@longtap="tagLongTap(item.id,item.name,item.isAdd)" @click="tagClick(item.link)">
						{{item.name}}
					</div>
				</div>
				<div class="dec">网站版权归原网站所有 仅提供导航服务</div>
			</div>
			<!-- 标签列表 -->
			<tag :list="recordList" :mySelf="true"></tag>
			
			
		</div>
		
		<uni-popup ref="confirmPopup" type="center" :maskClick="true">
			<div class="confirm-info">
				<div class="info-title">提示</div>
				<div class="info-txt" v-if="!currenLinkIsTop">置顶名站“<span>{{currenLinkName}}</span>”标签</div>
				<div class="info-txt" v-if="currenLinkIsTop">取消置顶名站“<span>{{currenLinkName}}</span>”标签</div>
				<div class="btn-wrap">
					<div class="btn btn-left" @click="close()">取消</div>
					<div class="btn btn-right" @click="sumbitLinkTop()">确认</div>
				</div>
			</div>
		</uni-popup>
		<uni-popup ref="sendPopup" type="center" :maskClick="false">
			<div class="send-popup">
				<div class="send-head">
					<div class="textarea-wrap">
						<!-- <span class="num">{{formData.content.length}}/2000</span> -->
						<textarea maxlength="2000" v-model="formData.content" placeholder-style="color:#bcbcbc;padding:0;font-size:26rpx" placeholder="这一刻的想法…" />
					</div>
					<div class="send-btn" @click="submit()">
						发布
					</div>
				</div>
				<div class="upload-list">
					<div class="upload-item">
						<image mode="aspectFill" style="width: 60rpx;height: 60rpx;" :lazy-load="true" src="/static/icon/btn_mine_add.png" alt="" @click="handlerUpload()" />
					</div>
					<div class="upload-item" v-for="(item,index) in wordList" :key="index">
						<image class="del" src="/static/icon/icon_shanchu2.png" mode="" @click="del(index)"></image>
						<image  :src="item.filePath" mode="aspectFill" @click="_previewImage(item.filePath)"></image>
					</div>
				</div>
				<div class="close" @click="closeSendPopup()">
					<image src="/static/icons/icon_guanbi.png" mode=""></image>
				</div>
			</div>
		</uni-popup>
    </div>
</template>

<script>
    import data from '@/js/index/browse/data.js';
    import methods from '@/js/index/browse/methods.js';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import tag from "@/components/tag.vue";
    import {mapState} from 'vuex';
	// 引入antv组件
	import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
    export default {
        data,
        methods,
        onLoad(e) {
			
			// setTimeout(()=>{this.$refs.confirmPopup.open()},1000)
        },
        onShow() {
			this.page = 1
			this.list_rows = 10
			this.list = []
			this.getTodayRecordList()
			this.getUserInfo()
			this.getTodayIndex()
			
			this.getMyAllLinks()
			this.getAllLinks()
		},
		mounted() {
			
		},
        onHide() {
            console.log('on hide')
        },
        onUnload() {
        },
		onPullDownRefresh() {
			this.page = 1
			this.list_rows = 10
			this.list = []
			this.getTodayRecordList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.getTodayRecordList()
		},
        computed: {
        	...mapState([ 'userInfo']),
        	bgHeight() {
        		// #ifdef APP-PLUS
        		return 250
        		// #endif
        		return this.navigationBarHeight + uni.upx2px(364);
        	}
        },
	
        components: {
			uniPopup,tag
        }
    };
</script>

<style>
   page{
   	background-color: #FFFFFF;
   }
  /* uni-page{
   	background-color: #FFFFFF;
   } */
</style>
<style scoped lang="scss">
    @import '~@/style/index/browse.scss';
	
</style>